import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import * as THREE from 'three';
import px from '@/assets/envMaps/px.jpg';
import nx from '@/assets/envMaps/nx.jpg';
import py from '@/assets/envMaps/py.jpg';
import ny from '@/assets/envMaps/ny.jpg';
import pz from '@/assets/envMaps/pz.jpg';
import nz from '@/assets/envMaps/nz.jpg';
import './index.less';

const Home = () => {
  const cubeTextureLoader = new THREE.CubeTextureLoader();
  const evnMapTexture = cubeTextureLoader.load([px, nx, py, ny, pz, nz]);
  const scene = new THREE.Scene();
  scene.background = evnMapTexture;
  scene.environment = evnMapTexture;

  return (
    <div className="home">
      <Canvas scene={scene} camera={{ position: [0, 0, 3] }}>
        <ambientLight />
        <OrbitControls />
      </Canvas>
    </div>
  );
};

export default Home;
